<template>
  <div>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
   <Breadcrumb>内容管理</Breadcrumb>
    </div>
     <!-- 选项卡开始 -->
       <el-form ref="form" :model="form"  label-width="80px">
              <!-- 封装的选项卡 -->
              <statuss v-model="form.status" />

               <channel v-model="form.channelId"/>
               <el-form-item label="日期">
                     <el-date-picker
                        v-model="form.date"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
               </el-form-item>
               <el-form-item>
                 <el-button type="primary"  :loading="isLoading" @click="onSubmit">查询</el-button>
              </el-form-item>
       </el-form>
  </el-card>
  <el-card class="box-card" style="margin-top:30px">
    <div slot="header" class="clearfix">根据筛选条件查询到{{total_count}}条数据,当前是第{{curPage}}页：</div>
     <el-table
        :data="articles"
        v-loading = "isLoading"
        style="width:100%; list-text:center">
        <el-table-column label="封面">
          <template slot-scope="scope">
            <!-- scope.row用于获取当前行的数据 -->
            <!-- 图片 -->
            <el-image
              :src="scope.row.cover.images[0]"
              style="width:150px;height:100px"
              lazy>
                <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
        >
        </el-table-column>
        <!--
              由于后端回传的数据是数值，而我们要显示出来是对应字符串，
              所以，这里不能直接使用status
         -->
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag  v-if="scope.row.status===0">草稿</el-tag>
            <el-tag  v-else-if="scope.row.status===1" type="info">待审核</el-tag>
            <el-tag  v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
            <el-tag  v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
            <el-tag  v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="pubdate"
          value-format="yyyy-MM-dd"
          label="发布时间"
        >
        </el-table-column>
          <!-- 自定义列模-->
        <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 编辑 -->
              <el-button type="primary" icon="el-icon-edit" circle @click="hEdit(scope.$index, scope.row)"></el-button>
              <!-- 删除 -->
              <el-button type="danger" icon="el-icon-delete" circle @click="hDelete(scope.$index, scope.row)"></el-button>
            </template>
        </el-table-column>
      </el-table>
    <!-- 分页
        1.total: 一共有多少条数据 默认情况，它会以每页10条进行计算总页数
        2. current-change事件。当点击页码时，它会触发并会传入当前的页码。
      -->
      <el-pagination
        :disabled="isLoading"
        style="margin-top: 10px"
        background
        layout="prev, pager, next"
        @current-change="hPageChange"
        :total="total_count">
      </el-pagination>
  </el-card>
  </div>
</template>

<script>
import Channel from '@/components/Channel.vue'
import Statuss from './components/Statuss.vue'
export default {
  name: 'arTicle',
  components: {
    Channel,
    Statuss
  },
  data () {
    return {
      isLoading: false, // 在点击查询时，产生加载中的交互效果
      articles: [], // 文章列表
      total_count: 0, // 当前查询能查到的总条数
      curPage: 1, // 当前要查询的页码
      form: {
        date: '', // 表单筛选日期范围
        status: null, // 查询文章的状态，不传这个参数，就是全部
        channelId: null // 查询频道编号
      }
    }
  },
  created () {
    this.loadAricles()
  },
  methods: {
    // @input: 父组件中监听子组件抛出的input事件，收到这个事件就去修改父组组中的form.status
    hInput (code) {
      console.log('从子组件status中传递的数据', code)
      this.form.status = code
    },
    // 删除按钮
    hDelete (index, row) {
      this.$confirm('确认要删除码？')
        .then(async () => {
          const idStr = row.id.toString()
          try {
            const res = await this.$http({
              method: 'DELETE',
              url: '/mp/v1_0/articles/' + idStr
            })
            console.log(res)
            // 3. 根据接口的反馈信息做后续处理
            // 如果这个操作不报错误，则可以认为是删除成功，
            // 下面要更新页面，有两种方案
            // (1) 再做一次查询(更加严谨，数据是从后端再次求回来的)
            this.loadAricles()
          } catch (error) {
            this.$message.error('删除失败，目前只能删除草稿！')
          }
        })
        .catch(() => {})
    },
    // 修改按钮
    hEdit (index, row) {
      console.log(index, row)
      // 1.获取id
      const idStr = row.id.toString()
      // 2.跳转路由
      // 方式一：
      // this.$router.push({
      //   name: 'editArticle',
      //   params: {
      //     id: idStr
      //   }
      // })
      // 方式二
      this.$router.push('/editArticle/' + idStr)
    },
    // 查询
    onSubmit () {
      this.loadAricles()
    },
    async loadAricles () {
      // 1. 日期范围
      let beginPubdate = null
      let endPubdate = null
      // 2. 根据用户选中的日期进行赋值
      if (this.form.date) {
        beginPubdate = this.form.date[0]
        endPubdate = this.form.date[1]
      }
      const queryObj = {
        // 这个是跳转的页码
        page: this.curPage,
        status: this.form.status,
        // 这两个是日期
        begin_pubdate: beginPubdate,
        end_pubdate: endPubdate,
        channel_id: this.form.channelId

      }
      // 对于axios来说，在哪里填充入参数：
      //  如果传的参数值是null，则axios会忽略这个参数：不向后端传递
      //  如果参数要放在请求体中的，则要写在 data
      //  如果参数要放在请求头中的(get)，则要写在 params
      //  如果明确说明参数要放在header中，则要写在headers
      this.isLoading = true
      try {
        const res = await this.$http({
          method: 'GET',
          url: '/mp/v1_0/articles',
          params: queryObj
        })
        this.articles = res.data.data.results
        this.total_count = res.data.data.total_count
        this.isLoading = false
      } catch (error) {
        this.$message.error('查询失败')
        this.articles = []
        this.total_count = 0
        this.isLoading = false
      }
    },
    hPageChange (curPage) {
      // 1. 更新当前页码
      this.curPage = curPage
      // 2. 再发请求
      this.loadAricles()
    }
  }
}
</script>
<style lang="less" scoped>

</style>
